<style>
.between{
  font-size: 28upx;
}
.between .time{
	font-size: 24upx;
	width: 374upx;
}
.lease-record-title{
	/* padding: 11px 15px; */
}
.lease-record-time{
	/* display: flex; */
	/* flex: 1; */
	width: 374upx;
	/* padding-right: 20upx; */
	/* justify-content: center; */
}
.moneynav{
	width: 180upx!important;
	text-align: center;
}
.pjnav{
	width: 160upx;
	text-align: center;
}
.pjbox{
	width: 160upx;
	display: flex;
	justify-content: center;
}
.pjbtn{
	font-size: 24upx;
	white-space: nowrap;
	margin: 0 auto;
	width: 120upx;
	margin-right: 0;
	margin-left: 0;
}
.uni-list-cell-navigate{
	padding: 22upx 18upx;
}
</style>
<template>
	<view class="flexview">
		<view class="uni-list">
			<view class="between uni-list-cell uni-list-cell-navigate lease-record-title">
				 <view class="lease-record-time">起止时间</view>
				 <view class="moneynav">金额</view>
				 <view class="pjnav">状态</view>
			</view>
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate between">
					<view class="time">
					{{item.createtm}} -- 
					<!-- <text v-if="item.status == 0">申请中</text>
					<text v-if="item.status == 1">待归还</text> -->
					<text v-if="item.status == 2||item.status == 4">{{item.backtm ? item.backtm : '待归还'}}</text>
					</view>
					<view class="moneynav" v-if="item.totalcost">{{item.totalcost}}元</view>
					<view class="moneynav" v-else>--</view>
					<view class="pjbox">
						<text v-if="item.status == 0">申请中</text>
						<text v-if="item.status == 1">待归还</text>
						<button class="pjbtn" v-if="item.status == 2" @click="evaluate(item)">去评价</button>
						<text v-if="item.status == 4">已评价</text>
					</view>
					
				</view>
			</view>
			<view v-if="list.length==0" class="nodata">
				<image src="../../static/img/nodata.png" mode=""></image>
			</view>
			<div class="nomore" v-if="!hasMore&&list.length>0">没有更多了</div>
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list:[
// 					{
// 						time:'2018-12-14 10:05:20',
// 						price:'30'
// 					}
				],
				hasMore:true,
				pageNum:1,
				pageSize:20,
			};
		},
		computed: mapState(['evaluateID']),
		methods:{
			...mapMutations(['setevaluateID']),
			evaluate(item){
				uni.navigateTo({
					url:'evaluate/evaluate?id='+item.id
				})
			},
			getList(){
				let that = this
				uni.request({
					url: this.httpUrl + 'resLease/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid:that.$store.state.userInfo.uid,
						pageNum: that.pageNum,
						pageSize: that.pageSize
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							that.list.push(...res.data.data.data)
							if(res.data.data.data.length < that.pageSize){
								that.hasMore = false
							}else{
								that.hasMore = true
								that.pageNum ++
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			}
		},
		onReachBottom(){
		  if(this.hasMore){
			  this.getList()
		  }
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			let id = this.evaluateID
			let that = this
			if(id != -1){
				this.list.forEach(item=>{
					if(item.id == id ){
						item.status = 4
						that.setevaluateID(-1)
					}
				})
			}
		}
	}
</script>
